<template>
	<view class="box">
		<u-navbar :is-back="false" title="购物车" :border-bottom="false" :title-bold="true"></u-navbar>
		<view class="top jsb" :style="{top:customBarHeight-1+'px'}">
			<view class="left">
				购物车有<span class="num">{{number}}</span>个商品
			</view>
			<view class="right" @click="clearAllCart">
				<span v-if="!open">管理</span>
				<span v-if="open">完成</span>
			</view>
		</view>
		<!-- 店铺列表 -->
		<view class="dpStore container_B " :style="{marginTop:statusBarHeight+'px'}" v-for="item in storeList"
			:key="item.id">
			<view class="dp_delete jsbc">
				<view class="dpName_select flc">
					<view class="selectAll" @click="selectAll(item)">
						<span class="noSelect" v-if="!storeArr.includes(item.id)"></span>
						<u-icon v-else size="36" :name="'/static/icons/xz.png'"></u-icon>
					</view>
					<view class="dpName">
						<view class="name flc">
							<u-icon :name="item.logo" size="64"></u-icon>
							<span class="ml2">{{item.name}}</span>
							<u-icon name="arrow-right" color="#333" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goodsList">
				<view class="goods flc" v-for="goods in item.goodsList" :key="item.id">
					<view class="left flc">
						<view class="sellect" @click="selectOne(goods,item.id)">
							<span class="noSelect" v-if="!goodsArr.includes(goods.id)"></span>
							<u-icon v-else size="36" :name="'/static/icons/xz.png'"></u-icon>
						</view>
						<view class="pic">
							<u-image width="160rpx" height="160rpx" mode="widthFix" :lazy-load="true"
								:src="goods.pic"></u-image>
						</view>
					</view>
					<view class="right ml2">
						<view class="goods_name">
							{{goods.name}}
						</view>
						<view class="type_name jsbc" v-if="goods.sku_name">
							<view class="type">
								型号
							</view>
							<view class="name">
								{{goods.sku_name}}
							</view>
						</view>
						<view class="price_add jsbc">
							<view class="price">
								￥{{goods.price}}
							</view>
							<view class="add">
								<u-number-box v-model="goods.num" :min="Number(1)" @plus="addNum(goods)"
									@minus="reduceNum(goods)" :disabled-input="true"></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="H150">

		</view>
		<u-empty text="没有数据呢~" mode="car" v-if="storeList.length==0"></u-empty>
		<view class="statusBar jsbc">
			<view class="left flc">
				<view class="select" @click="selectAlls">
					<span v-if="!all" class="noSelect"></span>
					<u-icon v-else size="36" :name="'/static/icons/xz.png'"></u-icon>
				</view>
				<view class="select ml2">
					全选
				</view>
			</view>
			<view class="right flc">
				<view class="price_num flc" v-if="goodsArr.length>0&&!open">
					<view class="num">
						已选{{goodsArr.length}}件合计：<span class="cxc">￥</span>
					</view>
					<view class="price cxc fz32">
						{{totalPrice}}
					</view>
				</view>
				<view class="btn ml2" v-if="!open" @click="goPay">
					结算<span>{{(goodsArr.length)}}</span>
				</view>
				<view class="btn ml2" v-if="open" @click="DeleteGoods">
					删除<span>{{(goodsArr.length)}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		tiao,
		toast
	} from '../../utils/common.js';
	import {
		getCartList,
		cartDecrease,
		cartIncrease,
		cartDelete
	} from '@/api/index.js'
	import { useCartStore } from '../../stores/index.js';
	export default {
		data() {
			return {
				storeList: [],
				// 单选
				goodsArr: [],
				storeArr: [],
				number: 0,
				totalPrice: "",
				all: false,
				open: false,
				statusBarHeight: uni.getStorageSync("statusBarHeight") || "",
				customBarHeight: uni.getStorageSync("customBarHeight") || ""
			}
		},
		onShow() {
			this.init()
		},

		methods: {
			init() {
				getCartList().then(res => {
					console.log(res);
					if(res.data.length==0){
						this.storeList = []
					}
					this.storeList = res.data.map(item => {
						return {
							name: item.store.business_name,
							id: item.store.id,
							logo: item.store.format_logo,
							goodsList: item.carts.map(c => {
								return {
									...c,
									pic: c.goods_sku.goods_props ? c.goods_sku.format_image : c
										.goods
										.images_format[0],
									num: c.goods_number,
									price: c.goods_sku.goods_props ? c.goods_sku.price : c.goods
										.min_price,
									name: c.goods.name,
									sku_name: c.goods_sku.goods_props ? c.goods_sku.goods_props[0]
										.value.name : ""
								}
							})
						}
					})
					this.computerNum()
				})
			},
			// 单选
			selectOne(ct, bId) {
				let index = this.goodsArr.findIndex(item => item == ct.id)
				let firstIndex = this.storeList.findIndex(item => item.id == bId)
				let secondIndex = this.storeList[firstIndex].goodsList.findIndex(item => item.id == ct.id)
				let arr = []
				let num = 0
				this.storeList[firstIndex].goodsList.forEach(item => {
					arr.push(item.id)
				})
				if (index == -1) {
					this.goodsArr.push(ct.id)

				} else {
					this.goodsArr.splice(index, 1)
				}

				this.goodsArr.forEach(item => {
					arr.forEach(c => {
						if (item == c) {
							num++
						}
					})
				})


				if (this.storeList[firstIndex].goodsList.length == num) {
					this.storeArr.push(bId)
				} else {
					let hhh = this.storeArr.findIndex(item => item == bId)
					if (hhh != -1) {
						this.storeArr.splice(hhh, 1)
					}
				}
				if (this.storeArr.length == this.storeList.length) {
					this.all = true
				} else {
					this.all = false
				}
				this.computerPrice()

			},
			// 多选
			selectAll(ct) {
				let index = this.storeList.findIndex(item => item.id == ct.id);

				let allGoodsSelected = this.storeList[index].goodsList.every(item => {
					if (this.goodsArr.includes(item.id)) {
						this.selectOne(item, ct.id);
						return true;
					}
					return false;
				});

				if (allGoodsSelected) {
					return;
				}

				this.storeList[index].goodsList.forEach(item => {
					if (!this.goodsArr.includes(item.id)) {
						this.selectOne(item, ct.id);
					}
				});
			},
			// 清空购物车(单)
			clearCartOne(id) {
				let index = this.storeList.findIndex(item => item.id == id)
				this.storeList[index].totalPrice = 0
				this.storeList[index].goodsList.forEach(item => {

					let hhh = this.goodsArr.findIndex(c => c == item.id)
					this.goodsArr.splice(hhh, 1)
				})
				let firstIndex = this.storeArr.findIndex(item => item == id)
				if (firstIndex != -1) {
					this.storeArr.splice(firstIndex, 1)
				}
			},
			clearAllCart() {
				this.open = !this.open
			},
			// 计算数量
			computerNum() {
				this.number = 0
				this.storeList.forEach(item => {
					item.goodsList.forEach(c => {
						this.number++
					})
				})
				
			},
			selectAlls() {
				if(this.storeList.length==0){
					toast("购物车数据为空")
					return
				}
				this.all = !this.all
				if (this.storeArr.length > 0 && this.storeArr.length != this.storeList.length) {
					this.goodsArr = []
					this.storeArr = []
					this.storeList.forEach(item => {
						this.selectAll(item)
					})
				} else {
					this.storeList.forEach(item => {
						this.selectAll(item)
					})
				}

			},
			computerPrice() {
				this.totalPrice = 0
				this.storeList.forEach(item => {
					item.goodsList.forEach(c => {
						if (this.goodsArr.includes(c.id)) {
							this.totalPrice = Number(this.totalPrice) + Number(c.price) * Number(c.num)
						}
					})
				})
				this.totalPrice = Number(this.totalPrice).toFixed(2)
			},
			addNum(item) {
				cartIncrease({
					cart_id: item.id,
					goods_number: 1
				}).then(res => {
					if (res.code == 200) {
						this.init()
						this.computerPrice()
					}
				})
			},
			reduceNum(item) {
				if (item.num == 1) {
					return
				}
				cartDecrease({
					cart_id: item.id,
					goods_number: 1
				}).then(res => {
					if (res.code == 200) {
						this.init()
						this.computerPrice()
					}
				})
			},
			DeleteGoods() {
				let that = this
				if (this.goodsArr.length == 0) {
					toast("请选择商品")
					return
				}
				let arr = this.goodsArr
				cartDelete({
					cart_ids: arr
				}).then(res => {
					if (res.code == 200) {
						toast('删除成功')
						arr.forEach(item=>{
							let index =  this.goodsArr.indexOf(item)
							this.goodsArr.splice(index)
						})
						setTimeout(() => {
							that.init()
						}, 200)
					}
				})
			},
			goPay(){
				if(this.storeArr.length>1){
					toast("不支持多商家购买")
					return
					
				}
				useCartStore().addCart(this.goodsArr)
				tiao('/page/orderConfirm/orderConfirm?type=2')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noSelect {
		display: block;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 1px solid #DDDDDD;
		box-sizing: border-box;
	}

	.top {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		color: #999999FF;
		position: fixed;
		left: 0;
		z-index: 999;

		.left .num {
			font-size: 36rpx;
			color: #333;
		}

		.right {
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
	}

	// 店铺的基础描述
	.dp_delete {
		border-bottom: 1rpx solid #dedede;
		padding: 20rpx 0;

		.selectAll {
			margin-right: 18rpx;
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			box-sizing: border-box;
		}



		.delete {
			color: #666666FF;
			font-size: 26rpx;
		}

		.dpName {
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}

		.tips {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;

			.line {
				width: 2rpx;
				height: 20rpx;
				background-color: #999;
				margin: 0 10rpx;
			}
		}
	}



	.goodsList .goods {
		padding: 20rpx 0;

		.left {
			width: 200rpx;
			height: 160rpx;

			.sellect .noSelect {
				display: inline-block;
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				overflow: hidden;
				border: 1px solid #DDDDDD;
			}

			.sellect {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				box-sizing: border-box;
				margin-right: 18rpx;
			}

			.pic {
				width: 160rpx;
				height: 160rpx;
				background: #F0F0F0;
				border-radius: 8rpx;
			}
		}

		.right {
			width: 440rpx;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 40rpx;

			.goods_name {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
			}

			.price_add {
				font-weight: 400;
				font-size: 30rpx;
				color: #F55945;
			}
		}
	}

	.statusBar {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		height: 120rpx;
		background-color: #fff;
		z-index: 99;
		overflow: hidden;

		.btn {
			width: 160rpx;
			height: 64rpx;
			background: linear-gradient(90deg, #FD4120, #F47749);
			border-radius: 32rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
</style>